<template>
	<view class="container">
		<form @submit="formSubmit">
			<tui-list-cell backgroundColor="#fff" :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">任务类型</view>

					<!-- <radio-group class="radio-group" name="sex">
						<label class="tui-radio">
							<radio value="1" color="#2FCC71"></radio>巡店任务
						</label>
						<label class="tui-radio">
							<radio value="2" color="#2FCC71"></radio>新开商家
						</label>
					</radio-group> -->
					<tui-radio-group class="radio-group" name="radio" v-model="val" @change="changeType">

						<tui-label class="tui-radio">
							<view class="thorui-align__center">
								<tui-radio value="0" color="#07c160" borderColor="#999"></tui-radio>
								<text class="tui-text">巡店任务</text>
							</view>
						</tui-label>
						<tui-label class="tui-radio" margin="0 0 0 40rpx">
							<view class="thorui-align__center">
								<tui-radio value="1" color="#07c160" borderColor="#999"></tui-radio>
								<text class="tui-text">新开商家</text>
							</view>
						</tui-label>
					</tui-radio-group>
				</view>
			</tui-list-cell>
			<view v-if="val == 0">
				<tui-list-cell backgroundColor="#fff" :hover="false" arrow @click="onChooseTime">
					<view class="tui-line-cell">
						<view class="tui-title">巡店时间</view>
						<input placeholder-class="tui-phcolor" class="tui-input tui-pr__30" disabled name="taskTime"
							placeholder="请选择时间" type="text" v-model="taskTime" />
					</view>
				</tui-list-cell>
				<tui-list-cell backgroundColor="#fff" :hover="false" arrow @click="onChooseMerchant">
					<view class="tui-line-cell">
						<view class="tui-title">选择店铺</view>
						<input placeholder-class="tui-phcolor" class="tui-input tui-pr__30" disabled
							name="merchantSelect" placeholder="请选择店铺" type="text" v-model="merchantResult" />
					</view>
				</tui-list-cell>
			</view>
			<view v-if="val==1">
				<tui-list-cell backgroundColor="#fff" :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">数量</view>
						<input placeholder-class="tui-phcolor" class="tui-input tui-pr__30" name="count"
							placeholder="请输入数量" type="number" v-model="count" />
					</view>
				</tui-list-cell>
			</view>
			<view class="tui-btn-box">
				<button class="tui-button-primary" hover-class="tui-button-hover" formType="submit"
					type="primary">提交</button>
				<button class="tui-button-primary tui-button-gray" hover-class="tui-button-gray_hover"
					@click="back">返回</button>
			</view>

		</form>

		<tui-datetime ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor"
			:color="color" :setDateTime="setDateTime" :unitTop="unitTop" :radius="radius" @confirm="timeChange">
		</tui-datetime>
		<!--多选-->
		<tui-select btnBackground="#07c160" checkboxColor="#07c160" :list="merchantList" multiple reverse :show="show"
			@confirm="confirm" @close="onClose"></tui-select>
	</view>
</template>

<script>
	import form from '@/components/common/tui-validation/tui-validation.js'
	import {
		getMerchantList,
		createTask
	} from '@/apis/user'
	export default {
		data() {
			return {
				val: 0,
				type: 2,
				startYear: 1980,
				endYear: 2030,
				cancelColor: '#888',
				color: '#2FCC71',
				setDateTime: '',
				result: '',
				unitTop: false,
				radius: true,
				taskTime: '',
				merchantList: [],
				show: false,
				merchantResult: '',
				merchantSelect: '',
				loading: false,
				count:''
			}
		},
		methods: {
			changeType: function(e) {
				console.log('change:' + e.detail.value)
				this.val = e.detail.value;
			},
			onChooseTime: function() {

				this.$refs.dateTime.show();
			},
			onChooseMerchant: function() {
				this.doGetMerchantList();
			},
			doGetMerchantList: function() {
				let that = this;
				that.loading = true
				getMerchantList(1, 100).then(res => {

					if (that.pageNum === 1) {
						that.merchantList = [];
					}
					for (let i = 0; i < res.rows.length; i++) {
						let listItem = {
							text: res.rows[i].shopName,
							value: res.rows[i].id
						}
						that.merchantList.push(listItem);
					}
					// that.merchantList = that.merchantList.concat(res.rows)

					that.loading = false;
					that.showSelect();

				})
			},
			showSelect() {
				this.show = true
			},
			confirm(e) {
				console.log(e)
				// this.tui.toast(e.options || '未选择~')
				if (e.options.length > 0) {
					this.merchantResult = "已选择" + e.options.length + "个";
					this.merchantSelect = e.options;
				} else {
					this.merchantResult = "";
				}

				this.onClose()
			},
			onClose() {
				this.show = false
			},
			timeChange(e) {
				console.log('change:' + e.result)
				this.taskTime = e.result;
			},
			formSubmit: function(e) {
				let that = this;
				console.log("formSubmit -- enter" + that.val)
				if (that.val == 0) {
					console.log("formSubmit")
					let rules = [{
						name: "taskTime",
						rule: ["required"],
						msg: ["请选择时间"]
					}, {
						name: "merchantSelect",
						rule: ["required"],
						msg: ["请选择店铺"]
					}]
					//进行表单检查
					let formData = e.detail.value;
					console.log(formData);
					let checkRes = form.validation(formData, rules);
					console.log("checkRes" + checkRes)
					if (checkRes) {
						that.tui.toast('请将信息填写完整');
						return
					}
					let merchantIds = []
					for (let i = 0; i < that.merchantSelect.length; i++) {
						
						merchantIds.push(that.merchantSelect[i].value)
					}
					
					console.log(merchantIds)
					
					createTask({
							memberIds: merchantIds,
							time: that.taskTime,
							type:that.val
						})
						.then(res => {
							console.log(res)
							this.$yrouter.back();
						})
						.catch(err => {
							console.log(err)
							uni.showToast({
								title: err.msg,
								icon: 'none',
								duration: 2000,
							})
						})

				}else if(that.val == 1){
					
					let rules = [{
						name: "count",
						rule: ["required"],
						msg: ["请输入数量"]
					}]
					//进行表单检查
					let formData = e.detail.value;
					console.log(formData);
					let checkRes = form.validation(formData, rules);
					console.log("checkRes" + checkRes)
					if (checkRes) {
						that.tui.toast('请将信息填写完整');
						return
					}
					createTask({
							count: that.count,
							// time: that.taskTime,
							type:that.val
						})
						.then(res => {
							console.log(res)
							this.$yrouter.back();
						})
						.catch(err => {
							console.log(err)
							uni.showToast({
								title: err.msg,
								icon: 'none',
								duration: 2000,
							})
						})
					
				}
			},
			back: function() {
				this.$yrouter.back();
			}

		}
	}
</script>

<style>
	.container {
		padding: 20rpx 0 50rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-cell-content {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}

	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}

	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}

	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}

	.tui-button-gray {
		margin-top: 30rpx;
	}
</style>
